<template>
  <div class='over-view'>
    <OverviewHead title="采购总览" class="mb20" />
    <div class="head">
      <div v-for="(item, index) in modelData" :key="index">
        <p class="mb20 ft12"><span>{{item.label}}</span> <span class="iconfont icon-gengduo_huaban-copy"></span></p>
        <p :class="item.class">1000</p>
      </div>
    </div>

    <div class="body mt30">
      <div class="rate">
        <OverviewHead title="实单率" class="mb20" />
        <div class="rate-progress pr">
          <span class="icon-huojian iconfont color-blue pa"></span>

          <div class="progress-box pa">
            <div>
              <span v-for="(item, index) in progressData" :key="index">
                <span v-for="(opt,optIndex) in item.num" :key="optIndex" :class="item.class"></span>
              </span>
            </div>
            <el-progress :text-inside="true" :stroke-width="20" :percentage="100" status="success"></el-progress>
            <div>
              <span class="ft12" v-for="(item, index) in 5" :key="index">{{index*20}}%</span>
            </div>
          </div>
        </div>
      </div>

      <div class="rank">
        <OverviewHead title="卖家服务排行榜" class="mb20" />
        <PopShop class="pop-shop" :headData0="headData" :showIcon="true" />
      </div>
    </div>
  </div>
</template>
<script>
import OverviewHead from './head.vue'
import PopShop from '../../../../components/popShops/popShops.vue'
export default {
  components: {OverviewHead,PopShop},
  name: "",
  data() {
    return {
      modelData:[
        {label:"今日求购数",class:"color-blue"},
        {label:"今日成交数",class:"color-red"},
        {label:"历史求购数",class:"color-blue"},
        {label:"历史成交数",class:"color-red"},
      ],
      progressData:[
        {num:1,class:"icon-zuanshi iconfont color-999"},
        {num:1,class:"icon-zuanshi iconfont color-yellow"},
        {num:2,class:"icon-zuanshi iconfont color-yellow"},
        {num:3,class:"icon-zuanshi iconfont color-yellow"},
        {num:1,class:"icon-huangguan iconfont color-yellow"},
      ],
      headData:[
        {label:"Top店铺",class:"title color-blue ft20"},
        {label:"排名每日凌晨更新",class:"ft12 ml15"},
      ],

      info:{}
    };
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.over-view {
  background-color: #f2f2f2;

  .head{
    display: flex;
    justify-content: space-between;

    >div{
      width: calc(25% - 25px);
      background-color: #fff;
      border-radius: 4px;
      padding: 45px 50px;
      box-sizing: border-box;
      text-align: center;

      .iconfont{
        font-size: 12px;
        margin-left: 5px;
        color: #ccc;
      }

      >p:nth-child(2){
        font-size: 24px;
      }
    }
  }
  .body{
    display: flex;
    justify-content: space-between;

    .rate{
      width: 55%;

      .rate-progress{
        height: 420px;
        padding: 20px;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 4px;

        .icon-huojian{
          font-size: 50px;
          right: 40px;
          top: 40px;
        }
        .progress-box{
          width: calc(100% - 50px);
          bottom: 0;
          padding: 50px 0 20px;

          >div{
            display: flex;
            margin: 15px 0;

            >span{
              width: 20%;
            }
          }
        }
      }
    }
    .rank{
      width: calc(45% - 30px);

      .pop-shop{
        width: 100%;
        border-radius: 4px;
        overflow: hidden;
        padding: 20px;
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }
}
</style>